<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OctoPrint实时通信</title>
    <!-- 引入SockJS和STOMP客户端库 -->
    <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1.5.0/dist/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
    <script>
        let stompClient = null;

        function connect() {
            const socket = new SockJS('http://localhost:8090/sockjs');
            const headers = {
                'X-Api-Key': 'your_api_key_here' // 替换为实际API密钥
            };
            stompClient = Stomp.over(socket);
            stompClient.connect(headers, () => {
                // // 订阅广播频道
                // stompClient.subscribe('/topic/public', (response) => {
                //     console.log('广播消息:', response.body);
                // });
                //
                // // 订阅私有频道
                // stompClient.subscribe('/user/queue/private', (response) => {
                //     console.log('私有消息:', response.body);
                // });
                //
                // // 订阅广播消息
                // stompClient.subscribe('/topic/messages', (response) => {
                //     console.log('收到消息:', response.body);
                // });
                // // 订阅定时通知
                // stompClient.subscribe('/topic/notifications', (response) => {
                //     console.log('定时通知:', response.body);
                // });
                // 订阅所有消息
                stompClient.subscribe('/topic/*', (message) => {
                    console.log('所有消息:', message);
                });

                // 心跳配置（防断开）
                stompClient.heartbeat.outgoing = 10000; // 10秒一次
            }, (error) => {
                console.error('连接失败:', error);
                setTimeout(connect, 5000); // 5秒后重连
            });
        }

        // 发送广播消息
        function sendBroadcast() {
            const msg = document.getElementById("message").value;
            stompClient.send("/app/broadcast", {}, msg);
        }

        // 发送私信
        function sendPrivate() {
            const msg = document.getElementById("message").value;
            stompClient.send("/app/private", {}, msg);
        }

        // 发送消息到服务端
        function sendMessage() {
            const msg = document.getElementById("message").value;
            stompClient.send("/app/send", {}, msg);
        }
    </script>
</head>
<body>
<button onclick="connect()">连接</button>
<input id="message" placeholder="输入消息">
<button onclick="sendBroadcast()">发送广播消息</button>
<button onclick="sendPrivate()">发送私信</button>
<button onclick="sendMessage()">发送消息到服务端</button>
</body>
</html>